<script lang="ts">
import { ref, defineComponent, reactive, onMounted, watch } from "vue";
import _ from "lodash";
import { Pagination } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/css";
import "swiper/css/pagination";
import "swiper/css/navigation";
import { downloadIcon } from "@/util/index";
import { userDownload } from "@/network/api";
import resizeRank from '@/util/screen'

export default defineComponent({
  name: "swiper-example-multiple-slides-per-biew",
  title: "Multiple slides per view",
  url: import.meta.url,
  components: {
    Swiper,
    SwiperSlide,
    downloadIcon,
  },
  props: ["supportData"],
  setup(props: any) {
    const supportData = ref() as any;
    supportData.value = props.supportData;
    watch(
      () => props.supportData,
      (val: any) => {
        supportData.value = val;
      }
    );
    const onMouseEnter = (item: any) => {
      item.check = true;
    };
    const onMouseLeave = (item: any) => {
      item.check = false;
    };
    const handleDownload = _.throttle((id: string) => {
      userDownload({ file_id: id,user_id:window.localStorage.getItem('id') }).then((res) => {
        if(res.code == 1) {
          window.open(res.data.url);
        }
      });
    }, 500);
    const rank = ref(0); /* 1为手机端 */
    onMounted(() => {
      /**
       * @methods 判定pc&movie
       */
      rank.value = resizeRank(rank.value)
      window.addEventListener('resize', () => {
        let screenWidth = document.body.clientWidth
        if (screenWidth < 768) {
          rank.value = 1
        } else {
          rank.value = 0
        }
      })
    });
    return {
      rank,
      onMouseEnter,
      onMouseLeave,
      supportData,
      downloadIcon,
      handleDownload,
      modules: [Pagination],
    };
  },
});
</script>

<template>
  <div class="supportBg" v-if="supportData?.length != 0">
    <div class="content">
      <div class="midContent" >
        <div class="supportTitle bigTitle">下载资料</div>
        <div class="supportItem">
          <swiper
            class="swiper"
            :modules="modules"
            :space-between="30"
            :slides-per-view="rank === 1 ? 1 : 3"
            :slides-per-group="rank === 1 ? 1 : 3"
            :pagination="{ clickable: true }"
          >
            <swiper-slide
              v-for="(item, index) in supportData"
              :key="index"
              class=""
              @mouseenter="onMouseEnter(item)"
              @mouseleave="onMouseLeave(item)"
            >
              <el-card
                class="scaleImgCard supportSlide"
                shadow="hover"
                style="border-radius: 15px"
              >
                <div class="supportSlideTitle secondTitle">
                  <!-- <div v-if="item.file_suffix == 'pdf'">User Manual</div>
                  <div v-else>Software</div>
                  <div></div> -->
                </div>
                <div class="supportSlideIcon">
                  <i
                    class="iconfont"
                    :class="downloadIcon[item?.file_suffix || 'pdf']"
                  ></i>
                </div>
                <div class="supportSlideName">{{ item.name }}</div>
                <div class="supportSlideHandle">
                  <!-- <span>View</span> -->
                  <span @click="handleDownload(item.id)">点击查看</span>
                </div>
              </el-card>
            </swiper-slide>
          </swiper>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("@/assets/css/content.css");

.supportBg {
  background-color: #fff;
  width: 100% !important;
}

.content {
  margin: 0 auto;
  padding: 60px 20px 40px 20px;

  .midContent {
    // width: 1400px;
    margin: auto;
  }

  .supportTitle {
    text-align: center;
    padding-bottom: 60px;
  }

  .supportItem {
    .swiper {
      height: 350px;
    }
    .supportSlide {
      padding: 0 40px;
      text-align: center;
      border-radius: 20px;
      height: 300px;

      .supportSlideTitle {
        font-weight: bold;
        padding: 20px 0 20px 0;
      }

      .supportSlideIcon {
        padding-bottom: 20px;

        .iconfont {
          font-size: 60px;
        }
      }

      .supportSlideName {
        font-size: $demand;
        color: $auxiliaryColor;
        font-weight: bold;
      }

      .supportSlideHandle {
        display: flex;
        padding: 40px 40px 30px 40px;
        justify-content: space-around;

        span {
          // text-decoration: underline;
          cursor: pointer;
          color: $mainColor;
          font-size: $text;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .content {
    background-color: #fff;
    margin: 30px auto 0 auto !important;
    padding: 0 10px 40px 10px !important;

    .midContent {
      width: 100%;
    }
    .supportTitle {
      text-align: left;
      padding: 30px 0;
      padding-left: 10px;
    }
    .supportItem {
      padding: 0 20px;
      .supportSlide {
        .supportSlideHandle {
          display: flex;
          padding: 40px 0 0 0;
          justify-content: space-around;
        }
      }
    }
  }
}
</style>